<template>
  <main-wrap v-wechat-title="'博客'">
    <div slot="left">
      <el-carousel trigger="click" height="320px" class="carousel-wrap hidden-xs-only">
        <el-carousel-item v-for="(item,k) in slideList" :key="k">
          <a class="carousel-box" :href="item.webPath?item.webPath:'javascript:;'">
            <img :src="item.imgPath" alt="">
          </a>
        </el-carousel-item>
      </el-carousel>
      <el-carousel trigger="click" height="200px" class="carousel-wrap hidden-sm-and-up">
        <el-carousel-item v-for="(item,k) in slideList" :key="k">
          <a class="carousel-box" :href="item.webPath?item.webPath:'javascript:;'">
            <img :src="item.imgPath" alt="">
          </a>
        </el-carousel-item>
      </el-carousel>
      <article-list title="最新文章" classify=""></article-list>
    </div>
  </main-wrap>
</template>

<script>
  import {querySlideList} from "../../assets/api/getData";

  export default {
    name: 'home',
    components: {},
    data() {
      return {
        slideList: [],
      }
    },
    created() {
      this.getSlideList();
    },
    methods: {
      async getSlideList() {
        try {
          let res = await querySlideList();
          this.slideList = res.data;
        } catch (err) {
          this.$message.error(err.msg);
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .carousel-wrap {
    margin-bottom: 20px;

    .carousel-box {
      display: block;
      height: 320px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    &.hidden-sm-and-up {
      .carousel-box {
        height: 200px;
      }
    }
  }

</style>
